
<template>
    <div class='details'>
        <!-- <div class="details-name">张志聪</div>
        <div class="details-nickname">个人在线简历</div> -->
        
        <div class="images">
            <div class="img1"></div>
            <div class="img2"></div>
            <div class="img3"></div>
            <div class="img4"></div>
            <div class="img5"></div>
            <div class="img6"></div>
        </div>

        <div class="b">
            <span>张志聪</span>
            <P>个人在线简历</P>
        </div>
        <div class="c"></div>
        <div class="d"></div>

    </div>
</template>
<script >
// import '../css/index.css'
export default ({
    name:'',
    components: {

    },
	mounted (){
        let img1 = document.querySelector('.img1')
        let img3 = document.querySelector('.img3')
        let img4 = document.querySelector('.d')
        let img5 = document.querySelector('.c')
        // 设置鼠标移动时触发的效果
        document.addEventListener('mousemove',e=>{
            // 获取鼠标的位置
            let mouseX = e.clientX
            let mouseY = e.clientY
            // 获取图片距离左侧和顶部的距离
            let img1x = img1.offsetLeft
            let img1y = img1.offsetTop

            let img3x = img3.offsetLeft
            let img3y = img3.offsetTop

            let img4x = img4.offsetLeft
            let img4y = img4.offsetTop

            let img5x = img5.offsetLeft
            let img5y = img5.offsetTop
            // 设置移动时的偏移量
            let diff1x = (mouseX-img1x)/45
            let diff1y = (mouseY-img1y)/45

            let diff3x = (mouseX-img3x)/18
            let diff3y = (mouseY-img3y)/18

            let diff4x = (mouseX-img4x)/30
            let diff4y = (mouseY-img4y)/30

            let diff5x = (mouseX-img5x)/8
            let diff5y = (mouseY-img5y)/8

            img1.style.transform = `translate(${diff1x}px,${diff1y}px)`
            img3.style.transform = `translate(${diff3x}px,${diff3y}px)`
            img4.style.transform = `translate(${diff4x}px,${diff4y}px)`
            img5.style.transform = `translate(${diff5x}px,${diff5y}px)`
        })
    }
})
</script>
<style lang="scss"  scoped>
.details{
    float: right;
    background-color:#fff;
    width:1200px;
    height: 700px;
    border-radius:20px;	
    padding: 40px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* 给背景一个渐变 */
    // background:linear-gradient(to left,
    //     rgb(238, 92, 92),
    //     rgb(154, 127, 250)) ;
    // background:linear-gradient(to bottom,#20e0af,#09afe9);
    // background-color: #d2d2dc;
    background-image: linear-gradient(to bottom, rgb(86, 71, 117), #000, #000);

    .images {
        width:1200px;
        height: 700px;
        position: absolute;
        overflow: hidden;
    }

    .images div {
        width:1200px;
        height: 700px;
        background-size: cover;
        position: absolute;
    }

    .img1 {
        background-image: url('../img/1.png');
    }

    .img2 {
        background-image: url('../img/2.png');
    }

    .img3 {
        background-image: url('../img/3.png');
    }

    .img4 {
        background-image: url('../img/4.png');
    }

    // .img5 {
    //     background-image: url('../img/5.png');
    // }

    .img6 {
        background-image: url('../img/6.png');
        transform: translate(600px,400px);
    }
    .b{
        z-index: 99;
        position: absolute;
        width: 400px;
        height: 250px;
        border-radius: 20px;
        /* 设置渐变 */
        background: linear-gradient(
            to right bottom,
            rgba(255,255,255,.6),
            rgba(255,255,255,.3),
            rgba(255,255,255,.2)
        );
        /* 重点：使元素背景模糊化 */
        backdrop-filter: blur(11px);
        /* 设置上高光和左高光，使其看起来更加逼真 */
        border-top: 1px solid rgba(255,255,255,.8);
        border-left: 1px solid rgba(255,255,255,.8);
    }
    .b span{
        /* 设置文字的大小和粗细 */
        font: 900 50px '';
        font-size: 50px;
        position: absolute;
        top: 10px;
        left: 20px;
        color: rgba(0,0,0,.5);
        /* 设置文字阴影 */
        text-shadow: 1px 1px 3px rgba(255,255,255,.7);
    }
    .b p{
        font: 900 25px '';
        font-size:25px;
        position: absolute;
        bottom: 20px;
        right: 20px;
        color: rgba(255,255,255,.3);
        /* 设置字体间距 */
        letter-spacing: 3px;
    }
    /* 接下来设置两个球 */
    .c{
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background-color: rgb(240,160,0);
        position: absolute;
        top: 460px;
        left:880px;
    }
    .d{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: #77fdd7;
        position: absolute;
        top: 250px;
        left: 1220px;
    }
    .details-name{
        font-size: 50px;
    }
    .details-nickname{
        margin-top:5px;
        color: #999;
    }
}
</style>